<template>
	<view class="my-content page">

		<div class="search-model" v-show="!listIsShow">
			<div class="form-item">
				<div class="icon">
					<image :src='serverImageUrl("/static/newStyleIcon/line.png")' mode="widthFix" style="width: 100%;">
					</image>
				</div>
				<div class="form-control" @click="getPopup(squareClass[0])">
					<div class="label">
						<div class="text">
							<div class="z9">{{$t("出发国")}}</div>
							<div class="label-line"></div>
						</div>
					</div>
					<div class="value">
						<template v-if="squareClass[0].from">
							{{$t(squareClass[0].from)}}
						</template>
						<template v-else>
							{{$t("请选择")}}
						</template>
					</div>
				</div>
				<div class="form-control" @click="getPopup(squareClass[0])">
					<div class="label">
						<div class="text">
							<div class="z9">{{$t("目的国")}}</div>
							<div class="label-line"></div>
						</div>
					</div>
					<div class="value">
						<template v-if="squareClass[0].arrive">
							{{$t(squareClass[0].arrive)}}
						</template>
						<template v-else>
							{{$t("请选择")}}
						</template>
					</div>
				</div>
			</div>
			<div class="form-item" v-if="type==2">
				<div class="icon">
					<image :src='serverImageUrl("/static/newStyleIcon/address.png")' mode="widthFix"
						style="width: 100%;"></image>
				</div>
				<div class="form-control" @click="selectCity('From')">
					<div class="label">
						<div class="text">

							<div class="z9">{{$t('出发地')}}</div>
							<div class="label-line green"></div>
						</div>
					</div>
					<div class="value">
						{{DepartureanddestinationcityFrom||$t('请选择')}}
					</div>
				</div>
				<div class="form-control" @click="selectCity('Arrive')">
					<div class="label">
						<div class="text">
							<div class="z9">{{$t('目的地')}}</div>
							<div class="label-line green"></div>
						</div>
					</div>
					<div class="value">
						{{DepartureanddestinationcityArrive||$t('请选择')}}
					</div>
				</div>
			</div>

			<div class="form-item">
				<div class="icon">
					<image :src='serverImageUrl("/static/newStyleIcon/car.png")' mode="widthFix" style="width: 100%;">
					</image>
				</div>
				<div class="form-control" @click="getPopup(squareClass[2])">
					<div class="label">
						<div class="text">
							<div class="z9">{{$t('运输方式')}}</div>
							<div class="label-line blue"></div>
						</div>
					</div>
					<div class="value"> {{$t(squareClass[2].label)||$t('请选择')}} </div>
				</div>
			</div>
			<div class="form-item">
				<div class="icon">
					<image :src='serverImageUrl("/static/newStyleIcon/goods.png")' mode="widthFix" style="width: 100%;">
					</image>
				</div>
				<div class="form-control" @click="getPopup(squareClass[1])">

					<div class="label">
						<div class="text">
							<div class="z9">{{$t('通关服务')}}</div>
							<div class="label-line yellow"></div>
						</div>
					</div>
					<div class="value"> {{$t(squareClass[1].label)||$t('请选择')}} </div>
				</div>
			</div>
			<div class="form-item">
				<div class="form-control between" @click="open1(0)">
					<div>
						<div class="label">{{$t('通关口岸')}}</div>
						<div class="value"> {{tongguan||$t('请选择')}}</div>
					</div>
					<image :src='serverImageUrl("/login_223@2x.png")' mode="widthFix" style="width: 25rpx;"></image>
				</div>
			</div>
			<div class="form-item" v-if="type==1">
				<div class="form-control between" @click="open1(1)">
					<div>
						<div class="label">{{$t('公司所在地')}}</div>
						<div class="value"> {{location1||$t('请选择')}}</div>
					</div>
					<image :src='serverImageUrl("/login_223@2x.png")' mode="widthFix" style="width: 25rpx;"></image>
				</div>
			</div>
			<div class="form-item">
				<div class="form-control" style="width: 100%;">
					<div>
						<div class="label">{{$t('含运费')}}</div>
					</div>
					<div class="tab">
						<div class="item" @click="freightValue='';GoodsList()" :class="{active:freightValue===''}">
							{{$t("不限")}}
						</div>
						<div class="item" @click="freightValue=1;GoodsList()" :class="{active:freightValue===1}">
							{{$t("是")}}
						</div>
						<div class="item" @click="freightValue=0;GoodsList()" :class="{active:freightValue===0}">
							{{$t("否")}}
						</div>
					</div>
				</div>
			</div>

			<div class="submit" @click="submit()">{{$t("下一步")}}</div>

		</div>

		<u-select v-model="cityShow" :list="cityList" mode="mutil-column-auto" @confirm="cityConfirm"></u-select>
		<u-popup v-model="show" mode="bottom" border-radius="12" width="70%" @close="closePop">
			<view class="popUp">
				<text class="popUpTitle">{{ $t(popUpArr[popUpName].title) }}</text>
				<!--        常规的-->
				<view v-if="popUpArr[popUpName].address === 'rule'" class="popUpSelect">

					<view v-for="i in popUpArr[popUpName].data" :class="[returnClass(i.name)]"
						@click="selectOptions(i)">
						<text>{{ $t(i.name) }}</text>
					</view>
				</view>
				<!--        输入框选择的-->
				<view v-else-if="popUpArr[popUpName].address === 'input-select'" class="setOff">

					<view>
						<u-search v-model="DepartureanddestinationcityFrom" :clearabled="false" :disabled="true"
							:show-action="false" input-align="center" :placeholder="$t('出发城市')" search-icon=""
							shape="square" @click="selectCity('From')"></u-search>
					</view>
					<image :src='serverImageUrl("/static/images/index/wangfandijia.png")'
						style="height: 31.4rpx;width: 55.81rpx;"></image>
					<view>
						<u-search v-model="DepartureanddestinationcityArrive" :clearabled="false" :disabled="true"
							:show-action="false" input-align="center" :placeholder="$t('目的城市')" search-icon=""
							shape="square" @click="selectCity('Arrive')"></u-search>
					</view>

				</view>
				<!--        双向地址的-->
				<view v-else-if="popUpArr[popUpName].address === 'from-arrive'" class="popUpSelect">
					<view v-for="(i,ind) in popUpArr[popUpName].data" :key="ind"
						:class="[returnClass(i.from + i.arrive)]" @click="selectOptions(i)">
						<text>{{ $t(i.from) }}->{{ $t(i.arrive) }}</text>
					</view>
				</view>
			</view>
		</u-popup>


		<view class="search" v-show="false">
			<u-search v-model="crossBorder" :show-action="false" :placeholder="$t('根据关键字进行搜索')" @clear="clear"
				@search="search"></u-search>

			<view class="squareClass">
				<view v-for="i in squareClass" :key="i.id"
					:style="'background: url(' + i.url + ');background-size:cover;'" class="squareClass_item"
					@click="getPopup(i)">
					<!--          第一种-->
					<view v-if="!i.address" class="squareClass_item_one">
						<text class="big">{{ $t(i.name) }}</text>
						<text class="small">{{ $t(i.label) }}</text>
					</view>
					<!--          第二种-->
					<view v-else class="squareClass_item_two">
						<text class="big">{{ $t(i.name) }}</text>
						<view>
							<text class="small">{{ $t(i.from) }}</text>
							<image v-if="i.arrive !== '' || i.from !== ''"
								:src='serverImageUrl("/static/images/index/jiantou_qiehuanyou_o.png")'
								style="width: 52.33rpx;height: 17.44rpx"></image>
							<text class="small">{{ $t(i.arrive) }}</text>
						</view>
					</view>
				</view>
			</view>

			<block v-if="type==1">
				<u-dropdown ref="uDropdown" active-color="#FF5400" @open="open1">
					<u-dropdown-item :title="$t('通关口岸')"></u-dropdown-item>
					<u-dropdown-item :title="$t('公司所在地')"></u-dropdown-item>
					<u-dropdown-item v-model="freightValue" :options="freight" :title="$t('含运费')"
						@change="change"></u-dropdown-item>
				</u-dropdown>
			</block>
			<block v-if="type==2">
				<u-dropdown ref="uDropdown" active-color="#FF5400" @open="open1">
					<u-dropdown-item :title="$t('通关口岸')"></u-dropdown-item>
					<u-dropdown-item v-model="freightValue" :options="freight" :title="$t('含运费')"
						@change="change"></u-dropdown-item>
				</u-dropdown>
			</block>


		</view>
		<view class="search" v-show="listIsShow">
			<u-search v-model="crossBorder" :show-action="false" :placeholder="$t('根据关键字进行搜索')" @clear="clear"
				@search="search"></u-search>
			<div style="height:24rpx"></div>
		</view>
		<view style="flex: 1;padding-top: 20rpx;width:690rpx;margin:0 auto;" v-show="listIsShow">
			<Item v-for="i in sotreData1" :key="i.id" :type="type" :item="i" @click.native="details(i)"
				@communicates="communicates" @communicate="communicate" @userPage="userPage"></Item>
		</view>
		<u-empty v-if="!sotreData1||sotreData1.length===0"></u-empty>

		<u-select v-model="cityShow1" :list="cityList" mode="mutil-column-auto" @confirm="kouan"></u-select>
		<Service />
		<vipPopup v-if="vipShow" :show="vipShow" @change="clickVipPopup" />
	</view>
</template>

<script>
	import {
		createC2CConversation,
		isBase64,
		time
	} from "@/common/public";
	import {
		IMAGE_URL
	} from "@/config/app";
	import Service from '@/components/service/service.vue'

	import vipPopup from "@/components/vipPopup/index.vue";
	import Item from '@/components/detail/FreightForwarderItem.vue'
	export default {
		components: {
			Service,
			vipPopup,
			Item
		},
		data() {
			return {
				listIsShow: false,
				lang: getApp().globalData.lang,
				cityShow1: false,
				sotreData1: [],
				/*搜索框上半部分*/
				crossBorder: "", //搜索框
				squareClass: [ //四个小分类
					{
						id: 1,
						nickname: "Countryofdestination",
						url: "https://gluz-oss.oss-cn-beijing.aliyuncs.com/uploads/20231101/0481e379b23a9ecbb0c6be83493829d2.png",
						name: "出发国目的国",
						address: true,
						from: "",
						arrive: ""
					},
					{
						id: 2,
						nickname: "clearance",
						url: "https://gluz-oss.oss-cn-beijing.aliyuncs.com/uploads/20231101/103d8fa22121d802b71f0f88dda23141.png",
						name: "通关服务",
						label: ""
					},
					{
						id: 3,
						nickname: "mode",
						url: "https://gluz-oss.oss-cn-beijing.aliyuncs.com/uploads/20231101/a17dd49afcf4496eb4f622af70ae9535.png",
						name: "运输方式",
						label: ""
					},
					{
						id: 4,
						nickname: "Departureanddestinationcity",
						url: "https://gluz-oss.oss-cn-beijing.aliyuncs.com/uploads/20231101/42cf4bf46c4e795ce3bbcc0fd9d5ab25.png",
						name: "出发和目的城市",
						address: true,
						from: "",
						arrive: ""
					},
				], //出发国选择
				CountryofdestinationFrom: "", //出发国目的国（出发地）
				CountryofdestinationArrive: "", //出发国目的国（到达地）
				clearance: "", //通关服务
				mode: "", //运输方式
				DepartureanddestinationcityFrom: "", //出发和目的城市（出发城市）
				DepartureanddestinationcityArrive: "", //出发和目的城市（到达城市）
				show: false, //弹出层
				popUpName: "Countryofdestination", //弹出层nickName
				popUpArr: { //弹出层信息渲染
					Countryofdestination: {
						title: "",
						address: "from-arrive", //连个地方选择
						data: [
							// {
							// 	from: "中国",
							// 	arrive: "中国",
							// 	id: 1
							// },
							{
								from: "中国",
								arrive: "俄罗斯",
								id: 2
							},
							{
								from: "俄罗斯",
								arrive: "中国",
								id: 3
							},
							// {
							// 	from: "俄罗斯",
							// 	arrive: "俄罗斯",
							// 	id: 4
							// },
						]
					}, //出发国和目的国筛选
					clearance: {
						title: "",
						address: "rule", //常规一个筛选的
						data: []
					}, //整车散货
					mode: {
						title: "",
						address: "rule",
						data: []
					}, //运输方式
					Departureanddestinationcity: {
						title: "",
						address: "input-select", //输入框选择的
						data: []
					}, //出发和目的城市
					// currentClass: null,
				},
				cityShow: false, //城市选择
				cityList: [], //城市列表
				cityType: "",
				location1: "",
				tongguan: "",
				freightValue: "",
				freight: [{
						label: "不限",
						label_ru: this.$t('不限'),
						value: ""
					},
					{
						label: "否",
						label_ru: this.$t('否'),
						value: 1
					},
					{
						label: "是",
						label_ru: this.$t('是'),
						value: 2
					}
				], //含运费
				currentSelect: null,
				type: 1,
				serverCurrent: {
					"清关": 2,
					"报关": 1,
					"报关+清关": 3,
					"": ""
				},
				page: 2, //分页数据auth: '',
				auth: '',
				vipShow: false,
				//后台开关验证 vip权限
				vip: false,
			};
		},
		onLoad({
			type
		}) {
			this.parseParamsFns.freightForwarder(this);

			uni.setNavigationBarTitle({
				title: type == 1 ? this.$t("查找货代服务商") : this.$t("查找货代订单")
			})

			this.type = type
			this.GoodsList({
				type
			})
			uni.showLoading({
				title: "Loading...",
				mask: true
			})
			this.getSelectCityLists()
			this.getUserAuth() // 获取用户权限
			this.$u.api.user.appCheck().then(res => {
				this.report = res.report
				this.vip = res.vip
			})
		},
		onReady() {

		},

		// 上拉加载数据分页
		onReachBottom() {
			this.$u.api.collection.getCrossborderList({
				type: this.type,
				page: this.page,
			}).then(res => {
				if (res.length <= 0) {
					this.$u.toast(this.$t('没有数据了'))
				} else {
					this.sotreData1 = [...this.sotreData1, ...res]
					this.page++
				}
			})
		},

		methods: {
			submit() {

				// departure_city
				// reach_city

				const obj = {
					type: this.type,
					searchKey: this.crossBorder,
					departure_country: this.CountryofdestinationFrom !== "" ? this.CountryofdestinationFrom ===
						"中国" ? 0 : 1 : "",
					reach_country: this.CountryofdestinationArrive !== "" ? this.CountryofdestinationArrive ===
						"中国" ? 0 : 1 : "",
					clearance: this.serverCurrent[this.clearance],
					mode: this.mode,
					departure_city: this.DepartureanddestinationcityFrom,
					reach_city: this.DepartureanddestinationcityArrive,
					port_city: this.tongguan,
					is_express_price: this.freightValue,
					company_city: this.location1
				}


				uni.setStorageSync("searchParams", obj)
				uni.navigateTo({
					url: "/pages/index/freightForwarderList/freightForwarderList?type=" + this.type,
				})
			},
			getUserAuth() {
				const that = this
				that.$u.api.user.getUserAuth().then(res => {
					that.auth = res
					uni.hideLoading()
				})
			},
			clickVipPopup() {
				this.vipShow = false
			},
			time,
			userPage(e) {
				this.$u.route({
					url: 'pages/user/homePage/homePage',
					params: {
						id: e.user_id
					}
				})
			},
			districts(val) {
				return val.length > 7 ? val.slice(0, 15) + "..." : val
			},
			//详情
			details(i) {
				this.$u.route({
					url: "/pages/index/detail/detail",
					params: {
						id: i.id,
						type: this.type,
						releaseType: 'crossborder'
					}
				})
			},
			communicates(i) {
				createC2CConversation(i.user.mobile, this)

			},
			//获取货物列表信息
			GoodsList(type) {
				return
				this.sotreData1 = []
				this.$u.api.collection.getCrossborderList({
					type: this.type,
					searchKey: this.crossBorder,
					departure_country: this.CountryofdestinationFrom !== "" ? this.CountryofdestinationFrom ===
						"中国" ? 0 : 1 : "",
					reach_country: this.CountryofdestinationArrive !== "" ? this.CountryofdestinationArrive ===
						"中国" ? 0 : 1 : "",
					clearance: this.serverCurrent[this.clearance],
					mode: this.mode,
					departure_city: this.DepartureanddestinationcityFrom,
					reach_city: this.DepartureanddestinationcityArrive,
					port_city: this.tongguan,
					is_express_price: this.freightValue,
					company_city: this.location1
				}).then(res => {
					this.sotreData1.push(...res)
				})
			},
			//获取城市信息
			getSelectCityLists() {
				this.$u.api.basic.getSelectCityList({
					is_port: true
				}).then(res => {
					this.cityList = res
				})
			},
			communicate(i) {
				if (this.type == 1) {
					//商家推广
					this.communicates(i)
				} else if (this.type == 2) {
					var mobile = uni.getStorageSync('mobile');

					if (mobile === i.user.mobile) {
						this.$u.toast(this.$t('不能参与自己'));
						return false
					}

					var that = this
					that.$u.api.user.order_join_day_auth({
						lang: that.lang
					}).then(res => {
						if (res == 1) {
							//参与竞标
							this.$u.route({
								url: '/pages/order/process/buildOrder',
								params: {
									type: "crossborder",
									release_id: i.id,
								}
							})
						} else {
							if (that.vip) {
								that.vipShow = true
								return
							} else {
								uni.showModal({
									content: that.$t('您的权限不足哦!请联系工作人员!'),
									showCancel: false,
									confirmText: that.$t('是'),
								})
								return false;
							}
							return
						}
					})
				}
			},
			//获取分类信息
			getActionSheetLists(data = {
				type: "clearance"
			}, type) {
				this.$u.api.basic.getActionSheetList(data).then(res => {
					this.popUpArr[type.nickname].data = res
				})
			},
			/*
			 * 搜索框上半部分*/
			//搜索框清除触发
			clear() {
				this.GoodsList()
			},
			//搜索框确定出发
			search() {
				this.GoodsList()
			},
			//四个方块点击获取
			getPopup(type) {
				this.popUpName = type.nickname //弹出层nickName
				console.log('type.name:', type.name);
				this.popUpArr[type.nickname].title = type.name
				this.show = true
				if (!type.address) {
					this.getActionSheetLists({
						type: type.nickname
					}, type) //获取分类
				}

			},
			//关闭弹出层
			closePop() {
				this.squareClass.forEach(item => {
					console.log('123123123');
					if (item.nickname === this.popUpName && item.address) {
						item.from = this[this.popUpName + "From"]
						item.arrive = this[this.popUpName + "Arrive"]
					} else if (item.nickname === this.popUpName) {
						item.label = this[this.popUpName]
					}
				})
				//弹出层关闭触发
				this.GoodsList()
			},
			//选择出发城市和到达城市
			selectCity(type) {
				this.cityType = type
				this.cityShow = true
			},
			//输入框选择
			selectOptions(data) {
				if (this.popUpArr[this.popUpName].address === "rule") {
					this[this.popUpName] = data.name
				} else if (this.popUpArr[this.popUpName].address === "from-arrive") {
					this[this.popUpName + "From"] = data.from
					this[this.popUpName + "Arrive"] = data.arrive
				}
			},
			cityConfirm(city) {
				this["Departureanddestinationcity" + this.cityType] = city[2].label
				this.GoodsList()
			},
			//口岸 or 所在地
			kouan(city) {
				if (this.currentSelect === 0) {
					this.tongguan = city[2].label
				} else if (this.currentSelect === 1) {
					this.location1 = city[2].label
				}
				this.GoodsList()
			},
			open1(index) {
				if (index < 2) {
					this.currentSelect = index
					this.cityShow1 = true
					this.$refs.uDropdown.close();
				}
			},
			change() {
				this.GoodsList()
			},
			mapMode(mode) {
				let modeArr = mode.split(',')
				let ret = ''
				for (let i in modeArr) {
					if (i > 0) {
						ret += '，' + this.$t(modeArr[i])
					} else {
						ret += this.$t(modeArr[i])
					}
				}
				return ret
			}
		},
		computed: {
			toImages() {
				return (src) => {
					return isBase64(src) ? src : IMAGE_URL + src
				}
			},
			storeImages() {
				return (sum, images) => {
					if (!Array.isArray(images)) return images
					return images.length > sum ? images.splice(sum) : images
				}
			},
			/*
			 * 搜索框上半部分*/
			returnClass() {
				return (name) => {
					if (this.popUpArr[this.popUpName].address === "rule") return name === this[this.popUpName] ?
						"popUpSelect_item shangse" : "popUpSelect_item"
					return name === this[this.popUpName + "From"] + this[this.popUpName + "Arrive"] ?
						"popUpSelect_item shangse" : "popUpSelect_item"

				}
			}
		}
	}
</script>

<style lang="scss">
	.bidding_news {
		display: flex;
		justify-content: center;
		margin-bottom: 31.4rpx;

		.bidding_card {
			width: 692rpx;
			background: $my-bgColorFFFFFF;
			box-shadow: 3rpx 7rpx 3rpx 0rpx rgba(234, 234, 234, 0.5);
			border-radius: 14rpx;
			overflow: hidden;

			.bidding_user {
				display: flex;
				flex-direction: row;
				align-items: center;
				padding: $my-padding-20;

				//头像大小
				.bidding_user_image {
					padding-left: $my-padding-10;
					height: 50rpx;
					width: 50rpx
				}

				//用户图标
				.bidding_user_icon {
					padding-left: $my-padding-10;
					height: 35rpx;
					width: 35rpx;
				}
			}

			//商品的简介
			.biddin_synopsis {
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				padding: 0 $my-padding-20 $my-padding-20 $my-padding-20;

				.title {}

				.bidding_synopsis_sel {
					padding: 5.23rpx 0 0 0;
					font-size: $my-font-size21;
					font-weight: 400;
					color: #0B0B0B;
					line-height: 70rpx;

					& text:first-child {}

					& text:last-child {
						font-weight: 600;
					}
				}
			}

			//商品图片展示区
			.bidding_image {
				padding: $my-padding-20 0 0 $my-padding-20;

				image {
					width: 229.07rpx;
					height: 225.58rpx;
					margin: 0 30rpx 30rpx 0;
					border-radius: 20rpx;
					box-shadow: 0px 0px 8px 0px #ababab;
				}
			}

			//地址信息
			.bidding_address {
				padding: 13.6rpx $my-padding-20 10rpx $my-padding-20;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				font-size: $my-font-size21;
				font-weight: 400;
				color: #888888;
				line-height: 30rpx;

				.bidding_ares {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: flex-start;

					.bidding_ares1 {
						display: flex;
						justify-content: flex-start;

						image {
							width: 24.42rpx;
							height: 31.4rpx;
						}
					}
				}
			}
		}
	}

	.page {
		display: flex;
		flex-direction: column;
	}

	/*
搜索框上半部分*/
	.search {
		background-color: #FFFFFF;
		padding: 34.88rpx 34rpx 0 34rpx;

		.squareClass {
			display: grid;
			grid-template-columns: repeat(2, 313.95rpx);
			justify-content: space-between;

			.squareClass_item {
				height: 156.98rpx;
				margin-top: 24.42rpx;
				border-radius: 20rpx;

				.big {
					font-size: 24rpx;
					font-weight: 600;

				}

				.small {
					font-size: 21rpx;
					font-weight: 400;

				}

				.squareClass_item_one {
					display: flex;
					flex-direction: column;
					width: 100%;
					height: 100%;
					justify-content: center;
					padding-left: 22.67rpx;

					text {
						margin-bottom: 6.98rpx;
						color: #FFFFFF;
					}
				}

				.squareClass_item_two {
					width: 100%;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					padding-left: 22.67rpx;

					text {
						margin-bottom: 6.98rpx;
						font-weight: 600;
						color: #FFFFFF;
					}
				}
			}
		}
	}

	.popUp {
		height: 100%;
		margin: 34.88rpx;
		display: flex;
		flex-direction: column;

		.popUpTitle {
			font-size: 28rpx;

			font-weight: 500;
			color: #000000;
			line-height: 38rpx;
			margin-bottom: 41.86rpx;
		}

		.popUpSelect {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: flex-start;

			.popUpSelect_item {
				margin-bottom: 24.42rpx;
				border-radius: 14rpx;
				width: 48%;
				margin-left: 1%;
				margin-right: 1%;
				padding: 20rpx;
				background: #F6F6F6;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 24rpx;

				font-weight: 400;
				color: #2F2F2F;
				line-height: 35rpx;
			}
		}
	}

	.shangse {
		font-weight: bold;
		background: linear-gradient(103deg, #D3EF93 2%, rgba(229, 245, 203, 0.24) 61%) !important;
	}

	.bidding_betwn {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.my-content {}

	.search-model {
		background-color: #f6f6f6;
		display: flex;
		flex-direction: column;
		padding: 30rpx;
		position: absolute;
		top: 0rpx;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 9999;
		box-sizing: border-box;

		.tab {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 16rpx;

			.item {
				background-color: #F3F3F3;
				border-radius: 16rpx;
				width: 30%;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 20rpx 0;
				font-size: 24rpx;
				text-align: center;
				height: 50rpx;
			}

			.active {
				background-image: linear-gradient(109deg, #D3EF93 1%, rgba(229, 245, 203, 0.24) 61%);
			}
		}

		.form-item {
			background-color: #fff;
			display: flex;
			width: 690rpx;
			padding: 20rpx;
			align-items: center;
			color: #3D3D3D;
			margin-bottom: 20rpx;
			border-radius: 8rpx;
			box-sizing: border-box;

			.icon {
				flex-shrink: 0;
				height: 64rpx;
				width: 64rpx;
				background-color: #F5F4F9;
				border-radius: 8rpx;
				margin-right: 24rpx;
			}

			.label {
				font-size: 26rpx;
				font-weight: 400;
				position: relative;
				display: flex;
			}

			.text {
				position: relative;
				z-index: 9;
			}

			.label-line {
				position: absolute;
				width: 80%;
				height: 10rpx;
				border-radius: 20rpx;
				bottom: 3rpx;
				right: -20rpx;
				z-index: 5;
				background: linear-gradient(90deg, #B4A9E2 -1%, rgba(176, 165, 223, 0.2) 100%);
			}

			.z9 {
				position: relative;
				z-index: 9;
			}

			.green {
				background: linear-gradient(90deg, #98D9D7 -1%, #EAF4F5 100%);
			}

			.blue {
				background: linear-gradient(90deg, #96D7F8 -1%, #E7F7FF 100%);
			}

			.yellow {
				background: linear-gradient(90deg, #FDD872 -1%, #FEF5DD 100%);
			}

			.value {
				font-size: 22rpx;
				color: #3D3D3D;
				margin-top: 12rpx;
			}

			.form-control {
				min-width: 50%;
			}
		}

		.between {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-right: 30rpx;
		}

		.submit {
			width: 602rpx;
			height: 93rpx;
			border-radius: 16rpx;
			background: #000000;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 auto;
			color: #fff;
			font-size: 30rpx;
			box-sizing: border-box;
			margin-top: 50rpx;
		}
	}
</style>